<template>
  <div style="display: flex;">
    <div class="box">
      <h1>全部</h1>
    </div>
    <div class="box" @click="handleChooseType">
      <el-badge :value="12" class="item">
        <h1>待处理</h1>
      </el-badge>
    </div>
    <div class="box">
      <h1>已完成</h1>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { useRouter } from "vue-router";
import usePermission from "@/hooks/usePermission";

const router = useRouter();
// 权限
const { hasPermission } = usePermission();
// 滴滴管理
const isDidi = computed(() => {
  return hasPermission("home:didi");
});
const handleChooseType = () => {
  // if (!isDidi.value) return;
  router.push({
    path: "/didi/reserve",
    query: {
      type: "0"
    }
  });
};
</script>
<style scoped lang="scss">
.box {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  transition: 0.7s;
  background-image: linear-gradient(to right, #79bbff, #409eff);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);

  &:hover {
    margin-top: -10px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;

    &::after {
      /* 过渡效果只能再鼠标放上去生效 不然鼠标离开也会有效果 */
      transition: 1s ease-in-out;
      transform: rotate(-45deg) translate(0, 300px);
    }
  }

  &::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 500px;
    height: 100px;
    background-image: linear-gradient(0deg,
        rgba(0, 0, 0, 0),
        rgba(255, 255, 255, 0.3),
        rgba(0, 0, 0, 0));
    transform-origin: center bottom;
    transform: translate(-250px, -100px) rotate(-45deg);
  }

  h1 {
    color: white;
    font-size: 40px;
  }
}
</style>
